<template>
  <el-card>
    <template #header>
      <el-row>
        <el-col :span="12">
          <p style="margin: 0;">我的审核记录</p>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button  type="primary" @click="holidayOpen = true;">节假日管理</el-button>
        </el-col>
      </el-row>
    </template>
    <div class="tree-box">
      <MForm :fields="fields" :modelValue="modelValue" @submit="search" @cancel="search">
        <template #extra>
          <el-button type="primary" @click="exportHtmlToWord">导出</el-button>
        </template>
      </MForm>
      <el-table :data="tableData" border style="width: 100%" height="550">
        <el-table-column type="selection" width="55" />
        <el-table-column label="组织名称" prop="organizationBaseName" :show-overflow-tooltip="true" width="250"
          align="center" />
        <el-table-column label="组织编号" prop="creditCode" align="center" width="200"/>
        <el-table-column label="法定代表人/负责人" prop="legalRepresentativeName" :show-overflow-tooltip="true" width="200"
          align="center" />
        <el-table-column label="组织类别" prop="organizationType" align="center" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.organizationType == 2 ? '' : 'warning'">
              <span class="tag">{{
                scope.row.organizationType == 1 ? '社团' : '民非'
              }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核进度"  header-align="center" width="500">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <div style="display: flex; align-items: center">
                <template v-for="item in scope.row.approveList">
                  <span :class="['check-step', { 'no-check': item.approveStatus == 0 }]">{{
                    item.approveDescription }}</span>
                  <el-icon>
                    <Right />
                  </el-icon>
                </template>
              </div>
              <el-button size="mini" type="text" @click="handleWatch(scope.row)" style="margin-left: 10px">详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="剩余时间" prop="approveTimeout" :show-overflow-tooltip="true" width="200" align="center" >
            <template #default="scope">
              <span :class="scope.row.approveFlag == 1?'timeColor2':'timeColor1'">{{scope.row.approveTimeout}}</span>
            </template>
        </el-table-column>
        <el-table-column label="转办时间" prop="approveStartTime" :show-overflow-tooltip="true" width="180" align="center" />
        <el-table-column label="申请时间" prop="createdTs" :show-overflow-tooltip="true" width="180" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
          <template #default="scope">
            <el-button size="mini" type="text" :icon="Stamp" @click="handleCheck(scope.row)">详情</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageInfo-box">
        <el-pagination v-model:current-page="params.pageNum" :page-sizes="[10, 100, 200, 300, 400]" background
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-card>
  <el-dialog destroy-on-close v-model="dialogCheckVisible" title="年检审核" width="95%" top="3vh">
    <checkST :showBtn="false" v-if="isSt" :currentRow="chooseRow">
    </checkST>
    <checkMF v-else :showBtn="false" :currentRow="chooseRow">
    </checkMF>
  </el-dialog>
  <el-dialog title="审核进度" v-model="openPress" width="600px" append-to-body destroy-on-close top="5vh">
    <checkStep :currentRow="chooseRow"></checkStep>
  </el-dialog>
  <el-dialog title="审核事项确认" v-model="dialogResultVisible" width="700px" top="4vh" append-to-body>
    <result></result>
  </el-dialog>
  <el-dialog title="节假日管理" v-model="holidayOpen" width="80%" top="4vh" append-to-body>
    <holidayList></holidayList>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { fields, modelValue } from './config'
import { getGCheckStep, getRecordList } from '@/api/yearCheck/index'
import { Right, Stamp } from '@element-plus/icons-vue'
import holidayList from '@/views/system/holiday/index.vue'
import checkST from '@/views/yearCheck/wCheck/components/checkST/checkST.vue'
import checkMF from '@/views/yearCheck/wCheck/components/checkMF/checkMF.vue'
import checkStep from './components/checkStep.vue'
import result from './components/result.vue'

defineOptions({
  name: 'logManagement'
})
const holidayOpen = ref(false)
const tableData = ref([])
const total = ref()
const chooseRow = ref({})
const isSt = ref(true)

// 搜索
const params = ref<any>({
  pageSize: 10,
  pageNum: 1,
})
const dialogCheckVisible = ref(false) //审核
const openPress = ref(false) //查看审核进度
const dialogResultVisible = ref(false) //审核结果
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
  tableData.value = []
  getRecordList(params.value).then(res => {
    const { data } = res
    tableData.value = data
    total.value = res.total
  })
}
search(modelValue)

const handleCheck = (row) => {
  isSt.value = row.organizationType == 1 ? true : false;
  chooseRow.value = Object.assign({}, row)
  dialogCheckVisible.value = true
}
const handleWatch = (row) => {
  chooseRow.value = Object.assign({}, row)
  openPress.value = true
}
const checkSubmit = () => {
  dialogResultVisible.value = true
}
const handleSizeChange = () => {
  search(modelValue)
}
const handleCurrentChange = (value) => {
  search(modelValue)
}
</script>
<style lang="scss" scoped>
.tree-box {
  position: relative;

  .nodeBox {
    width: 100%;
    height: 80vh;
    overflow-x: auto;
    cursor: all-scroll;
  }

  .showLevel {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.dialog-row {
  width: 100%;

  .dialog-col {
    width: 100%;
    display: flex;

    .dialog-col-serialNumber {
      color: #333;
      height: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      font-weight: bold;
      margin-right: 20px;
    }

    .dialog-col-rig {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(237, 237, 237, 1);
      margin-bottom: 20px;
      padding-bottom: 20px;

      .dialog-col-rig-content {
        .dialog-col-rig-content-title {
          font-size: 13px;
          color: #666;
          margin-bottom: 20px;
        }

        .dialog-col-rig-content-form {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}

.btns {
  display: flex;
  flex-direction: row-reverse;
}

.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 30px;
}

.check-step {
  color: #0fbb21;
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &.no-check {
    color: #909399
  }
}

.timeColor1{
  color:green;
}

.timeColor2{
  color:red;
}
</style>
